<template>
	<view class="container">
		<!--头部滚动条-->
		<view class="topTitle">
			<scroll-view class="nav-scroll" scroll-x="true" style="white-space: nowrap;">
				<view v-for="(item, index) in navList" :key="index" @tap="switchTab(index)"
					:class="[currentIndex==index?'active':'nav-item']">
					{{ item.text }}
				</view>
			</scroll-view>
			<view class="rightSeclect">
				<text class="mrpx">默认排序</text>
				<image src="../../../../static/icon/icon_seclect.png" class="seclectIcon"></image>
			</view>
		</view>

		<!--列表-->
		<view v-for="(item, index) in orderList" class="orderListBg" :style="index>0?'margin-top: 100rpx;':''"  @click="itemClick(item)">
			<view>
				<view class="xdsj">投诉时间：<text class="itemTime">{{item.time}}</text><text
						class="itemState">{{item.state==1?'投诉':''}}</text></view>

			</view>
			<view class="itemCenter">

				<image class="itemImg" :src="item.img"></image>
				<view>
					<view class="itemOneText">{{item.type}}</view>
					<view class="itemTwoText">已选：<text class="itemName">{{item.name}}达人</text></view>
					<view class="itemTwoText">下单时间：{{item.time}}</view>

				</view>
				<view style="position: absolute;right: 40rpx;height: 80px;">
					<view class="itemOneText orgText ">¥<text class="itemOneTextMoney">{{item.wages}}</text></view>
					<view class="itemTwoText " style="text-align:center">共{{item.orderTime}}时</view>
					
				</view>
			</view>
			<view class="itemCenter">

				<image src="../../../../static/icon/icon_suggest_error.png" class="itemIcon"></image>
				<view>
					<text class="itemTs">投诉</text>
					<text class="itemContent">{{item.content}}</text>
					
				</view>

			</view>
			<view class="itemCenter">

				<view class="itembtmText">小雨达人在锻炼这块非常专业，对待我这么...</view>

			</view>
			<view class="itemCenter">
			
				<view class="itemCenter delectText" ><image src="../../../../static/icon/icon_delect.png" style="width: 16px;height: 16px;">删除</view>
			
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				startX: '', // 触摸起始点横坐标
				deltaX: '',
				navList: [{
						text: '全部'
					},
					{
						text: '投诉'
					},
					{
						text: '建议'
					}
				],
				currentIndex: 0,
				orderList: [{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150',
						content: '未按约定时间到达地点',
						other:''
					},
					{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150',
						content: '未按约定时间到达地点'
					},
					{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150',
						content: '未按约定时间到达地点'
					},
					{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150',
						content: '未按约定时间到达地点'
					},
					{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150',
						content: '未按约定时间到达地点'
					},
					{
						img: '../../../../static/icon/img_girl.png',
						time: '2024-06-01',
						state: 1,
						type: '锻炼达人',
						name: '小雨',
						orderTime: '2',
						wages: '150',
						content: '未按约定时间到达地点'
					}

				]

			}
		},
		methods: {
			itemClick(item){
				uni.setStorageSync('suggestItem',JSON.stringify(item))
				uni.navigateTo({
					url:'/pages/module/suggestions/suggestionDetail/suggestionDetail',
					
				})
			}
		}
	}
</script>

<style>
	.topTitle {
		display: flex;
		align-items: center;
	}


	.nav-item {
		display: inline-block;
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		padding: 10px;
		margin-right: 10px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}

	.nav-item:last-child {
		margin-right: 0;
	}

	.active {
		display: inline-block;
		color: #FF9E44;
		text-align: center;
		/* Pingfang SC/Headline/Medium */
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		padding: 10px;
		margin-right: 10px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}

	.couponListBg {
		border-radius: 2px;
		background: #FFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;

	}

	.seclectIcon {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.rightSeclect {

		display: flex;
		align-items: center;
		position: absolute;
		right: 50rpx;
	}

	.orderListBg {
		border-radius: 2px;
		background: #FFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;

	}

	.itemCenter {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
	}

	.itemOneText {
		margin-left: 20px;
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-weight: 700;
		line-height: 33px;
	}

	.itemTwoText {
		margin-left: 20px;
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		line-height: 33px;
	}

	.itemThreeText {
		margin-left: 20px;
		color: #FEA442;
		font-family: DIN;
		font-size: 18px;
		font-weight: 700;
		line-height: 33px;
	}

	.moneyIcon {
		color: #FEA442;
		font-family: DIN;
		font-size: 12px;
		font-weight: 700;
	}

	.itemName {
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 600;
	}

	.itemOrderTime {
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		position: absolute;
		right: 50rpx;
		line-height: 33px;
	}

	.itemImg {
		width: 85px;
		height: 85px;
		flex-shrink: 0;
	}

	.seclectIcon {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.rightSeclect {

		display: flex;
		align-items: center;
		position: absolute;
		right: 50rpx;
	}

	.mrpx {
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 14px;
		font-weight: 400;
	}

	.xdsj {
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
	}

	.itemTime {
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.itemState {
		color: red;
		text-align: right;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		position: absolute;
		right: 50rpx;
	}

	.itemOneTextMoney {
		overflow: hidden;
		color: #FEA442;
		font-family: DIN;
		font-size: 18px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}

	.orgText {
		color: #FEA442;
		font-family: DIN;
		font-size: 12px;
		font-style: normal;
		font-weight: 700;
		line-height: 16px;
	}

	.itemIcon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}

	.itemTs {
		color: #E83030;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-weight: 600;
		padding-left: 10rpx;
	}

	.itemContent {
		color: #E83030;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		padding-left: 10rpx;
	}
	.itembtmText{
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "PingFang SC";
		font-size: 12px;
		font-weight: 400;
	}
	.delectText{
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 12px;
		font-weight: 400;
		position: absolute;right: 50rpx;
	}
</style>